<template>
  <div class="page-container">
    <button class="back-button" @click="goToHome">
      <span class="icon-arrow-left"></span>
      返回首页
    </button>
    
    <div class="page-header">
      <h1>技能配置</h1>
      <p>管理团队成员的技能类别和具体技能项</p>
    </div>

    <div class="content-layout">
      <div class="skill-categories">
        <h2>技能类别</h2>
        <div class="category-list">
          <div class="category-item" 
               v-for="category in skillCategories" 
               :key="category.id"
               :class="{ active: selectedCategoryId === category.id }"
               @click="selectCategory(category.id)">
            {{ category.name }}
            <div class="category-actions">
              <button class="icon-btn" @click.stop="editCategory(category)"><i class="icon-edit"></i></button>
              <button class="icon-btn danger" @click.stop="deleteCategory(category.id)"><i class="icon-trash"></i></button>
            </div>
          </div>
          
          <button class="add-category" @click="showAddCategoryModal = true">
            <i class="icon-plus"></i> 添加技能类别
          </button>
        </div>
      </div>

      <div class="skills-section">
        <div class="section-header">
          <h2>
            {{ selectedCategory ? selectedCategory.name : '请选择技能类别' }}
            <span v-if="selectedCategory">({{ skills.length }} 项技能)</span>
          </h2>
          
          <button class="primary-btn" 
                  @click="showAddSkillModal = true" 
                  :disabled="!selectedCategory">
            <i class="icon-plus"></i> 添加技能
          </button>
        </div>

        <div class="skills-list" v-if="selectedCategory">
          <div class="skill-item" v-for="skill in skills" :key="skill.id">
            <div class="skill-info">
              <h3>{{ skill.name }}</h3>
              <p>{{ skill.description || '无描述' }}</p>
            </div>
            <div class="skill-actions">
              <button class="icon-btn" @click="editSkill(skill)"><i class="icon-edit"></i></button>
              <button class="icon-btn danger" @click="deleteSkill(skill.id)"><i class="icon-trash"></i></button>
            </div>
          </div>
          
          <div class="empty-state" v-if="skills.length === 0">
            <p>该类别下暂无技能</p>
            <button class="primary-btn" @click="showAddSkillModal = true">添加技能</button>
          </div>
        </div>
        
        <div class="empty-state" v-if="!selectedCategory && skillCategories.length > 0">
          <p>请从左侧选择一个技能类别</p>
        </div>
        
        <div class="empty-state" v-if="skillCategories.length === 0">
          <p>暂无技能类别，请先创建</p>
        </div>
      </div>
    </div>

    <!-- 添加/编辑技能类别弹窗 -->
    <div class="modal-backdrop" v-if="showAddCategoryModal">
      <div class="modal">
        <div class="modal-header">
          <h3>{{ isEditingCategory ? '编辑技能类别' : '添加技能类别' }}</h3>
          <button class="close-btn" @click="showAddCategoryModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveCategory">
            <div class="form-group">
              <label>类别名称 *</label>
              <input type="text" v-model="currentCategory.name" required>
            </div>
            <div class="modal-footer">
              <button type="button" class="secondary-btn" @click="showAddCategoryModal = false">取消</button>
              <button type="submit" class="primary-btn">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 添加/编辑技能弹窗 -->
    <div class="modal-backdrop" v-if="showAddSkillModal">
      <div class="modal">
        <div class="modal-header">
          <h3>{{ isEditingSkill ? '编辑技能' : '添加技能' }}</h3>
          <button class="close-btn" @click="showAddSkillModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveSkill">
            <div class="form-group">
              <label>技能名称 *</label>
              <input type="text" v-model="currentSkill.name" required>
            </div>
            <div class="form-group">
              <label>技能描述</label>
              <textarea v-model="currentSkill.description" rows="3"></textarea>
            </div>
            <div class="modal-footer">
              <button type="button" class="secondary-btn" @click="showAddSkillModal = false">取消</button>
              <button type="submit" class="primary-btn">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SkillConfig',
  data() {
    return {
      skillCategories: [
        { id: 1, name: '开发技能' },
        { id: 2, name: '设计技能' },
        { id: 3, name: '业务技能' }
      ],
      skills: [
        { id: 1, categoryId: 1, name: 'JavaScript', description: '熟练掌握ES6及以上特性' },
        { id: 2, categoryId: 1, name: 'Vue.js', description: 'Vue框架开发经验' },
        { id: 3, categoryId: 1, name: 'React', description: 'React框架开发经验' },
        { id: 4, categoryId: 2, name: 'UI设计', description: '用户界面设计能力' },
        { id: 5, categoryId: 3, name: '客户沟通', description: '良好的客户沟通能力' }
      ],
      selectedCategoryId: null,
      showAddCategoryModal: false,
      showAddSkillModal: false,
      isEditingCategory: false,
      isEditingSkill: false,
      currentCategory: { id: null, name: '' },
      currentSkill: { id: null, categoryId: null, name: '', description: '' }
    };
  },
  computed: {
    selectedCategory() {
      return this.skillCategories.find(cat => cat.id === this.selectedCategoryId) || null;
    },
    filteredSkills() {
      return this.skills.filter(skill => skill.categoryId === this.selectedCategoryId);
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    selectCategory(id) {
      this.selectedCategoryId = id;
    },
    editCategory(category) {
      this.isEditingCategory = true;
      this.currentCategory = { ...category };
      this.showAddCategoryModal = true;
    },
    deleteCategory(id) {
      if (confirm('确定要删除这个技能类别吗？相关技能也会被删除')) {
        this.skillCategories = this.skillCategories.filter(cat => cat.id !== id);
        this.skills = this.skills.filter(skill => skill.categoryId !== id);
        if (this.selectedCategoryId === id) {
          this.selectedCategoryId = null;
        }
      }
    },
    saveCategory() {
      if (this.isEditingCategory) {
        const index = this.skillCategories.findIndex(cat => cat.id === this.currentCategory.id);
        this.skillCategories.splice(index, 1, this.currentCategory);
      } else {
        this.currentCategory.id = Date.now();
        this.skillCategories.push(this.currentCategory);
      }
      this.resetCategoryModal();
    },
    resetCategoryModal() {
      this.showAddCategoryModal = false;
      this.isEditingCategory = false;
      this.currentCategory = { id: null, name: '' };
    },
    editSkill(skill) {
      this.isEditingSkill = true;
      this.currentSkill = { ...skill };
      this.showAddSkillModal = true;
    },
    deleteSkill(id) {
      if (confirm('确定要删除这个技能吗？')) {
        this.skills = this.skills.filter(skill => skill.id !== id);
      }
    },
    saveSkill() {
      if (this.isEditingSkill) {
        const index = this.skills.findIndex(skill => skill.id === this.currentSkill.id);
        this.skills.splice(index, 1, this.currentSkill);
      } else {
        this.currentSkill.id = Date.now();
        this.currentSkill.categoryId = this.selectedCategoryId;
        this.skills.push(this.currentSkill);
      }
      this.resetSkillModal();
    },
    resetSkillModal() {
      this.showAddSkillModal = false;
      this.isEditingSkill = false;
      this.currentSkill = { id: null, categoryId: null, name: '', description: '' };
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin: 20px 0 30px;
}

.page-header h1 {
  color: #2c3e50;
  margin-bottom: 8px;
}

.page-header p {
  color: #7f8c8d;
  font-size: 14px;
}

.content-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
}

.skill-categories {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.skill-categories h2 {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  color: #2c3e50;
}

.category-list {
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.category-item {
  padding: 12px 20px;
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-item:hover {
  background-color: #f8f9fa;
}

.category-item.active {
  background-color: #ebf5fb;
  border-left: 4px solid #3498db;
  color: #3498db;
  font-weight: 500;
}

.add-category {
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: #f8f9fa;
  color: #3498db;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.add-category:hover {
  background: #ebf5fb;
}

.skills-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header h2 {
  font-size: 18px;
  color: #2c3e50;
  margin: 0;
}

.skills-list {
  padding: 20px;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.skill-item {
  padding: 15px;
  border-radius: 6px;
  background: #f8f9fa;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

.skill-item:hover {
  background: #f1f2f6;
}

.skill-info h3 {
  margin: 0 0 5px 0;
  color: #2c3e50;
}

.skill-info p {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.icon-btn {
  background: none;
  border: none;
  color: #7f8c8d;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.icon-btn:hover {
  color: #3498db;
  background: rgba(52, 152, 219, 0.1);
}

.icon-btn.danger:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
}

.empty-state p {
  margin-bottom: 15px;
}

/* 按钮样式 */
.primary-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.primary-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.primary-btn:hover:not(:disabled) {
  background: #2980b9;
  transform: translateY(-1px);
}

.secondary-btn {
  background: #ecf0f1;
  color: #2c3e50;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.secondary-btn:hover {
  background: #dcdde1;
}

/* 弹窗样式 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #2c3e50;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #7f8c8d;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

/* 图标样式模拟 */
.icon-plus::before { content: "+"; }
.icon-edit::before { content: "✏️"; }
.icon-trash::before { content: "🗑️"; }
.icon-arrow-left::before { content: "←"; }
</style>